<template>
	<view>
		<!-- <view class="f-c bf p20" @click="showCalendar">
			<view>{{totalQuery.time}}</view>
			<view class="icon"><text class="down"/></view>
		</view> -->
		<view class="p1">
			<view class="mi1c p3 bs15 f-col" style="min-height: 240rpx;">
				<view class="f-row">
					<view class="f-col f-g-1">
						<view class="f-col">
							<view class="f40 wei">{{result.allMoney}}</view>
							<view>账单总金额（元）</view>
						</view>
					</view>
				</view>
				<view class="mt20 f32">
					<!-- <view @click="go({t:1,url:'/yb_shd/dp/statement/balance-flow'})">
						<text class="mr10 f26" style="border: 1px solid #000000;padding:5rpx">已结算</text>
						<text>已汇余额</text>
						<text class="iconfont iconright f22 ml5" style="margin-top: 0;" />
					</view> -->
					<view class="cardList">
						<view class="card" v-for="(item,index) in totalList" :key="item.name">
							<text class="f28">{{item.name}}</text>
							<text class="f40 wei">{{item.num}}</text>
						</view>
					</view>
				</view>
			</view>
		
			<view class="card-content">
				<view class="w100 f-bt">
					<view class="wei c0 f32 mb20">交易概况<text class="ca2 f28 ml20 nowei">{{result.effective || 0}}笔（{{result.invalidCount || 0}}笔退款）</text></view>
					<!-- <view class="c0">{{result.money}}</view> -->
				</view>
				<scroll-view v-if="sarr.length" class='ws-n sarr bf' scroll-x='true' :scroll-into-view="toView">
					<block v-for="(v,i) in sarr" :key='i' >
						<view :id="'id' + i" @click="clickSarr(i)" class='f-g-0 mr15 bs10 c6 dis-in sarri f28 t-c'
							:class="{wei:v.active}"
							:style="{background:v.active?`rgba(${cTR(tColor)},1)`:'',color:v.active?'#000':'#000'}">
							{{v.name}}</view>
					</block>
				</scroll-view>
				<column :type="totalQuery.type" :data="result" />
			</view>
			<view class="card-content">
				<view class="w100 f-bt pb30" @click="show = true">
					<view class="wei c0 f32">
						订单概况
						<text class="f26 c6 ml20">{{selectTypeValue}}</text>
						<text class="icon"><text class="down"/></text>
						</view>
					<view class="c6">收入金额/元</view>
				</view>
				<u-action-sheet :list="orderTypes" v-model="show" @click="selectType"></u-action-sheet>
				<scroll-view scroll-y @scrolltolower="nextPage" style="height: 320rpx;">
					<view @click="goDl(item)" v-for="item in list" :key="item.outTradeNo" class="f-bt wei bt-fa" style="padding: 30rpx 20rpx 30rpx 0;">
						<block>
							<text>#{{item.takeNo}}</text>
							<block v-if="totalQuery.type == 1">
								<text>{{item.deliveryMode == 10?'自提':'外卖'}}</text>
							</block>
							<block v-if="totalQuery.type == 2">
								<text v-if="item.origin == 1">微信小程序</text>
								<text v-else-if="item.origin == 2">微信公众号</text>
								<text v-else-if="item.origin == 3">支付宝小程序</text>
								<text v-else-if="item.origin == 4">百度小程序</text>
								<text v-else-if="item.origin == 5">收银台下单</text>
							</block>
							<block v-if="totalQuery.type == 3">
								<text v-if="item.origin == 1">微信小程序</text>
								<text v-else-if="item.origin == 2">微信公众号</text>
								<text v-else-if="item.origin == 3">支付宝小程序</text>
								<text v-else-if="item.origin == 4">百度小程序</text>
								<text v-else-if="item.origin == 5">收银台下单</text>
							</block>
							<text>￥{{item.storeActualMoney}}<text class="iconfont iconright c9 f22 ml5" style="margin-top: 0;" /></text>
						</block>
					</view>
					<!-- 空布局 -->
					<mescroll-empty v-if="list.length === 0"></mescroll-empty>
				</scroll-view>
				
			</view>
			<u-calendar
				v-model="showrl"
				mode="date"
				:btnstyle="{ background: '#FE9367' }"
				range-color="#FE9367"
				range-bg-color="rgba(253,215,75,0.2)"
				active-bg-color="#FE9367"
				@change="changeCalendar"
			></u-calendar>
		</view>
	</view>
</template>

<script>
	import {
		utilMixins,
	} from "@/common/util-mixins.js"
	import qiunDataCharts from '@/yb_shd/dp/components/qiun-data-charts/qiun-data-charts.vue'
	import column from '@/yb_shd/dp/statement/components/Column.vue'
	import MescrollEmpty from '@/mescroll-uni/components/mescroll-empty.vue';
	export default {
		components: {
			qiunDataCharts,
			MescrollEmpty,
			column
		},
		mixins: [utilMixins],
		data(){
			return{
				getFlag:false, //临时解决方案 最好防抖
				totalQuery:{
					time:'',
					type:'1' //1外卖 2店内 3当面付
				},
				result:{},
				listQuery:{
					time:'',
					type:'1', // 1外卖2其他3快餐4堂食5当面付
					page:1
				},
				list:{},
				showrl: false,
				show:false,
				orderTypes:[{text: '外卖订单',value:1},{text: '其他订单',value:2}],
				selectTypeValue:'外卖订单',
				totalList:[
					{name: '预计收入',num: '0'},{name: '有效订单',num: '0'},
					{name: '无效订单',num: '0'}
				],
				columnData:{
					 categories: ['营业额','支出'],
					 series:[{name: "商品原价",data: [26,0]},{name: "配送费",data: [3,0]},{name: "包装费用",data: [2,0]}]
				},
				sarr: [
					{name: '外卖统计',active: true,type: 1}, {name: '店内统计',active: false,type: 2},
					{name: '当面付统计',active: false,type: 3}
					],
			}
		},
		onLoad(option) {
			this.totalQuery.time = option.time || new Date().format('yyyy-mm-dd')
			this.listQuery.time = option.time || new Date().format('yyyy-mm-dd')
			this.util.setNT(this.totalQuery.time.replace(/(\d{4})-/,'') + '账单详情')
			this.getTotalData()
		},
		methods:{
			async nextPage(){
				if(this.getFlag){
					return
				}
				this.getFlag = true
				this.listQuery.page++
				let list =	await this.getListData('nextPage')
				if(list.length){
					 this.list = this.list.concat(list)
					 this.getFlag = false
				 }
			},
			async getTotalData(){
				try {
					let {
						data
					} = await this.util.request({
						'url': this.api.statementBillInfo,
						data: this.totalQuery
					})
					this.result = data
					this.totalList[0].num = data.allEstimate
					this.totalList[1].num = data.allEffective
					this.totalList[2].num = data.allInvalidCount
					this.getListData()
				} catch (e) {
					this.util.message(e.msg, 3)
				}
			},
			async getListData(type){
				try {
					let {
						data
					} = await this.util.request({
						'url': this.api.statementBillOrderInfo,
						data: this.listQuery
					})
					if(type === 'nextPage'){
						return data
					}else{
						this.list = data
					}
				} catch (e) {
					this.util.message(e.msg, 3)
				}
			},
			selectType(i){
				this.selectTypeValue = this.orderTypes[i].text
				this.listQuery.type = this.orderTypes[i].value
				this.listQuery.page = 1
				this.getListData()
			},
			clickSarr(index) {
				switch(index){
					case 0:
					this.orderTypes = [{text: '外卖订单',value:1},{text: '其他订单',value:2}]
					this.selectTypeValue = '外卖订单'
					this.listQuery.type = '1'
					break;
					case 1:
					this.orderTypes = [{text: '快餐',value:3},{text: '堂食',value:4}]
					this.selectTypeValue = '快餐'
					this.listQuery.type = '3'
					break;
					case 2:
					this.orderTypes = [{text: '当面付',value:5}]
					this.selectTypeValue = '当面付'
					this.listQuery.type = '5'
					break;
				}
				this.listQuery.page = 1
				this.sarr.forEach((item, i) => {
					if (i === index) {
						item.active = true
						this.totalQuery.type = item.type
						this.getTotalData()
					} else {
						item.active = false
					}
				})
			},
			showCalendar() {
				this.showrl = true;
			},
			changeCalendar(e){
				this.totalQuery.time = this.listQuery.time = e.result
				this.getTotalData()
			},
			goDl(item){
				var query = {
					outTradeNo:item.outTradeNo,
					type:this.listQuery.type
				}
				uni.setStorageSync('flowListDetails',query)
				this.go({
					t:1,
					url:'/yb_shd/dp/statement/order-detail?type=billDetail'
					})
			},
		}
	}
</script>

<style scoped lang="scss">
	.cardList {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		font-size: 30rpx;
		.card {
			display: flex;
			flex-direction: column;
			width: 24%;
			height: 120rpx;
			background: transparent;
			margin-top: 20rpx;
			border-radius: 10rpx;
			justify-content: flex-start;
		}
	}
	.mi1c {
		// background: #F9D43E;
		background: #FE9367;

	}
	.card-content{
		border-radius: 10rpx;
		margin-top: 20rpx;
		padding: 20rpx;
		background-color: #FFF;
	}
	.charts-column{
		width: 690rpx;
		height: 500rpx;
		background-color: #FFFFFF;
	}
	.icon{
		position: relative;
		right: -10rpx;
		top: 50%;
		.down{
			position: absolute;
			width: 0;
			height: 0;
			top: 2prx;
			border-right: 10rpx solid transparent;
			border-left: 10rpx solid transparent;
			border-top: 10rpx solid #000000;
		}
	}
</style>
